<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" href="assets/css/jquery.ui.theme.css"
	rel="stylesheet" />
<link type="text/css" href="assets/css/jquery.ui.core.css"
	rel="stylesheet" />
<link type="text/css" href="assets/css/jquery.ui.resizable.css"
	rel="stylesheet" />
<link type="text/css" href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

<script src="assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.reel.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>

<style type="text/css">

/*.product {
	border: 1px solid #d6d2c4;
	background-color: white;
	height: 300px;
}*/
.product-desc {
	height: 175px;
	position: relative;
	top: 200px;
	width: 175px;
	background-color: #fff;
	box-shadow: 3px 3px gray;
}

.labelClass {
	text-align: left;
}

td {
	text-transform: none;
}

.chkButton {
	position: relative;
	top: 270px;
	left: 1px;
}

#noteId {
	text-transform: none;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
<%
	String id = request.getParameter("id");
%>
<script type="text/javascript">

	$(document).ready(function(){
		
		
		$('#chkLink').click(function(){
			
			var value = $('#obj_0').attr('src');
			if(value == 'assets/elements/Dummy.png') {
				//alert('You Must Upload room Image');	
				
					$('#myModal').modal();
					
				
				
				return;
			}
			
			navigate();
			
		});
		
	});
	
	
	function navigate() {
		window.location = 'checkout.jsp?id=<%=id%>';

	}
</script>


<title>Tesco | Product View</title>

</head>
<body>




	<div class="container">

		<%@include file="header.jsp"%>
		<br />

		<hr />
		<p class="text-muted" id="noteId">
			Note : <i>Click continuously on the furniture object, to view in
				different angles after dragging it on to the room.</i>
		</p>
		<p class="text-muted" id="noteId">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>Click
				on the furniture object to stop auto rotation, move & resize the
				object anywhere on the room for better view.</i>
		</p>

		<div id="content">
			<div id="background" class="background">
				<img id="obj_0" width="640" height="480" src="#"></img>
			</div>
			<div id="tools">

				<span class="btn btn-primary btn-file"> Upload Room Image<input
					type="file" id="imgInp" />
				</span> <br /> <br /> <a class="btn btn-primary btn-large"
					href="index.jsp">Search More Items</a>

				<div class="chkButton">
					<a href="#" id="chkLink"><img src="assets/images/checkout.png" /></a>
				</div>


			</div>
			<div id="objects">
				<div class="obj_item">
					<img id="image" width="150" height="150" class="ui-widget-content"
						src="assets/elements/<%=id%>.png" alt="el" />
				</div>

				<div class="product">



					<div class="product-desc">


						<table class="table" align="left">
							<tr>
								<td>Product Name : Chair</td>
							</tr>
							<tr>
								<td>Effect : Oak Effect</td>
							</tr>
							<tr>
								<td></td>
							</tr>
						</table>
						<h4 class="text-success" align="center">$ 100.00</h4>

					</div>

				</div>

			</div>



		</div>
	</div>

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Alert</h4>
				</div>
				<div class="modal-body">Please Upload an Image of Your Living
					Room.</div>
				<div class="modal-footer">
					<button type="button" class="btn btn btn-primary"
						data-dismiss="modal">Close</button>

				</div>
			</div>
		</div>
	</div>
	<script src="assets/js/barcamp.js">
		
	</script>
	<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>